<template>
	<div class="nav-detail">
		<div class="index-top layout pl30rem pr30rem">
			<i class="iconfont icon-zuo fs50rem white" @click="$router.back(-1)" v-if="showApp !='1' && isiOS !='1' "></i>
			<search-bar class="flex_1"></search-bar>
		<!-- 	<div class="inform">
				<span class="hint">99+</span>
				<i class="iconfont icon-news"></i>
			</div> -->
		</div>	
		<section class="detail-nav">
			<scroll-navbar :channels="channels" key-name="category_name" v-model="cateid" key-id='category_id'></scroll-navbar>
		</section>
		<section class="index-banner" v-show="adv_image">
			<swiper :data="banner" img-key="adv_image" :options="Options">
			</swiper>
		</section>
		<ul class="pl30rem pr30rem pb40rem shop-list layout flex-w" v-infinite-scroll="loadData" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-if="flag">
			<router-link v-for="item in data" :key="item.nav_id" tag="li" :to="'/ordering/detail/commodity-detail/' + item.goods_id" class="mt40rem">
				<img class="responsive-img" v-lazy="img_url + item.pic_cover_mid" alt="">
				<p class="mt20rem fs30rem c333 bold ellipsis">{{ item.goods_name }}</p>
				<div style="min-height:2rem;">
					<p class="mt15rem white pt5rem pb5rem pr10rem pl10rem mr10rem bg-red fs20rem radius" style="display: inline-block;" v-if="item.brand_name">{{ item.brand_name }}</p>
				</div>
				<p class="mt10rem"><strong class="mr5rem fs34rem red">￥{{ item.price }}</strong><i class="red fs16rem experience">预售价</i></p>		
				<div class="layout mt15rem mb30rem">
					<del class="fs20rem c999">原价:{{ item.market_price }}元</del>
					<!-- <span class="fs24rem c666">送出{{ item.sales }}份</span> -->
					<span class="fs24rem c666">已有{{ item.shares }}人预购</span>
				</div>			
				<button class="mt25rem w100 pt15rem pb15rem bg-red white fs28rem bold">预约中</button>
			</router-link>
		</ul>
		<template v-else>
			<default :imgUrl="img" explain='请查看其它分类'></default>
		</template>
	</div>
</template>

<script>
	import  { getGoodsList, getGoodsBanner, getCategory }  from '@/api/nav-detail';
	import ScrollNavbar from '@/components/Scroll-navbar';
	import Swiper from '@/components/Swiper';
	import Default from "@/components/Default";	
	import SearchBar from '@/components/Search-bar';
	import $toast from '@/utils/toast';
	import { Lazyload, InfiniteScroll } from 'mint-ui';
	import Vue from "vue";
	Vue.use(Lazyload);

	export default{
		components:{
			Swiper,
			ScrollNavbar,
			Default,
			SearchBar,
		},
		directives:{
			InfiniteScroll
		},
		data()
		{
			return{
				channels   : [],
				banner     : [],
				data       : [],
				type       : this.$route.query.type,
				isiOS      : this.$route.query.isapp,
				navIndex   : this.$route.query.index,
				cateid     : parseInt(this.$route.params.id),
				page_index : 1,
				page_size  : 10,
				loading    : false,
				flag       : true,
				img_url    : process.env.IMG_URL,
				img        : require('../../../assets/icon-goods2.png'),
				showApp    : window.sessionStorage.getItem('isapp'),
				Options:{
					slidesPerView : 'auto',
					loopedSlides  : 'auto',
					autoplay: {
						delay: 5000,
					},
					pagination: {
				    	el: '.swiper-pagination',
				    	bulletClass : 'my-red',
					},
				},
			}
		},
		created()
		{
			this.loadBanner();
			this.loadNav();
		},
		watch:{
			cateid(newVal,oldVal)
			{
				this.initData();
				this.loadBanner();
			}
		},
		methods:
		{
			loadData()
			{	
				console.log(this.cateid)
				this.loading = true;
				var params = {
					type       : this.type,
					cateid     : this.cateid,
					page_index : this.page_index++,
					page_size  : this.page_size
				}

				getGoodsList(params).then(res => {
					if(res.data.length > 0 )
					{
						this.data = this.data.concat(res.data);
						this.loading = false;
					}
					else if (params.page_index > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.page_size)
					{
						this.loading = true;
					}
				})

			},
			initData()
			{
				this.data = [];
				this.page_index = 1;
				this.flag = true;
				this.loadData();
			},
			loadBanner()
			{
				let params = {
					type   : this.type,
					cateid : this.cateid
				}
				getGoodsBanner(params).then(res => {
					this.banner = res.data
				})
			},
			loadNav()
			{
				getCategory(this.type).then(res => {
					this.channels = res.data;
				})
			},
		},
	}
</script>

<style lang="less">
	.nav-detail{
		.index-top{
			height: 90/28rem;
			background: #ff0036;
			.inform{
				color: #fff;
				position:relative;
				.hint{
					background: #fff;
					color: #ff0036;
					font-size: 20/28rem;
					text-align:center;
					width: 50/28rem;
					height: 25/28rem;
					line-height: 25/28rem;
					position: absolute;
					top:-5/28rem;
					right: -15/28rem;
					border-radius: 15/28rem;
				}
				i{
					font-size: 52/28rem;
				}
			}
		}
		.shop-list{
			overflow: hidden;
		    li{
		    	width: 48%;
		    	button{
		    		border-radius: 10/28rem;
		    	}
		    	.experience{
		    		border-radius: 5/28rem;
		    		background-color: #ffdee5;
		    		padding:2/28rem 5/28rem;
		    		vertical-align: top;
		    	}
		    	img{
		    		height: 360/28rem;
		    	}
		    }
		}
		.detail-nav{
			.swiper-container{
				.swiper-wrapper{
					.swiper-slide{
						min-width: 20% !important;
						width:initial !important;
					}
					.swiper-slide-active{
						font-weight: bold;
                		color: #ff0036 !important;
                		border-bottom: 2px solid #ff0036;
					}
				}
			}
		}
		.index-banner{
			.swiper-container{
				.swiper-wrapper{
					height: 380/28rem;
					img{
						width: 100%;
						height: 100%;
						display: block;
						object-fit:cover;
					}
				}
			}
		}
	}
</style>
